import { Provider } from 'react-redux';
import './App.css';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { lazy, Suspense } from 'react';

const Counter = lazy(() =>
  import('./counter').then((module) => ({ default: module.Counter }))
);
// 创建 slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: 0, // 添加初始状态
  reducers: {
    add: (state) => state + 1,
    minus: (state) => state - 1,
  },
});
// 创建 slice
const counterSlice11 = createSlice({
  name: 'counter11',
  initialState: 0, // 添加初始状态
  reducers: {
    add: (state) => state + 1,
    minus: (state) => state - 1,
  },
});
// 导出 actions
export const { add, minus } = counterSlice.actions;
export const { add: add11, minus: minus11 } = counterSlice11.actions;
// 配置 store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
    counter11: counterSlice11.reducer,
  },
});

function App() {
  return (
    <div className="app">
      <div className="card">
        <Provider store={store}>
          <Suspense fallback={<div>Loading...</div>}>
            <Counter />
          </Suspense>
        </Provider>
      </div>
    </div>
  );
}

export default App;
